import React from 'react';
import { IconButton, Box } from '@mui/material';
import { Image as ImageIcon } from '@mui/icons-material';

interface ImageUploadProps {
  onImageSelect: (file: File) => void;
}

export const ImageUpload: React.FC<ImageUploadProps> = ({ onImageSelect }) => {
  const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      onImageSelect(file);
    }
  };

  return (
    <Box>
      <input
        accept="image/*"
        id="image-upload"
        type="file"
        hidden
        onChange={handleImageChange}
      />
      <label htmlFor="image-upload">
        <IconButton component="span" color="primary">
          <ImageIcon />
        </IconButton>
      </label>
    </Box>
  );
};